<!-- src/views/FormControlsView.vue -->
<template>
  <div class="form-controls-view">
    <h1>9.1 表单输入绑定 - 控件演示</h1>

    <section>
      <h2>9.1.3 复选框与单选框</h2>
      <CheckboxRadio />
    </section>

    <section>
      <h2>9.1.4 选择框</h2>
      <SelectBox />
    </section>
  </div>
</template>

<script setup>
import CheckboxRadio from '@/components/CheckboxRadio.vue'
import SelectBox from '@/components/SelectBox.vue'
</script>

<style scoped>
.form-controls-view {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fafafa;
}
h2 {
  margin-top: 0;
  color: #333;
}
</style>
